<template>
  <div class="search">
    <!--    标题-->
    <div class="se-title">
      <van-nav-bar left-arrow title="商品搜索" @click-left="$router.back()" />
    </div>
    <!--    搜索框-->
    <div class="se-content">
      <van-search
        ref="search"
        v-model="searchContent"
        background="#F1F1F3"
        placeholder="请输入您搜索的商品"
        shape="square"
        show-action
        @search="search"
      >
        <template #action>
          <div class="search-btn" @click="search(searchContent)">搜索</div>
        </template>
      </van-search>
    </div>
    <!--    最近搜索-->
    <div class="se-bottom">
      <div class="bottom-body">
        <div>最近搜索</div>
        <div>
          <van-icon name="delete-o" @click="clear" />
        </div>
      </div>
      <!--    列表-->
      <div class="se-list">
        <ul>
          <li
            v-for="(item, index) in history"
            :key="index"
            @click="search(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getHistory, setHistory } from '@/utils/storage'

export default {
  name: 'searchCom',
  // import引入的组件需要注入到对象中才能使用",
  components: {},
  data () {
    // 这里存放数据",
    return {
      history: getHistory(),
      searchContent: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.search.querySelector('input').focus()
    })
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 方法集合",
  methods: {
    search (key) {
      if (key === '') {
        this.$router.push('/list')
      } else {
        const index = this.history.indexOf(key)
        if (index !== -1) {
          this.history.splice(index, 1)
        }
        this.history.unshift(key)
        setHistory(this.history)
        this.$router.push(`/list?goods_name=${key}`)
      }
    },
    clear () {
      this.history = []
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {}
}
</script>
<style lang="less">
.search {
  .se-title {
    .van-nav-bar .van-icon {
      color: black;
    }
  }

  .se-content {
    .van-search__content {
      background-color: #fff;
    }

    .search-btn {
      background-color: #fa2209;
      color: white;
      width: 80px;
      text-align: center;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }

  .se-bottom {
    margin-top: 20px;

    .bottom-body {
      width: 90%;
      margin: auto;
      color: #9a9a9a;
      display: flex;
      justify-content: space-between;
    }

    .se-list {
      width: 90%;
      margin: auto;

      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      li {
        width: 100px;
        line-height: 30px;
        border: 1px solid #ccc;
        text-align: center;
        border-radius: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
